<template>
  <div>
    <div class="cover-layer"></div>
    <div id="new-markdown" class="editor-layer">
      <div class="editor-top">
        <input
          class="editor-title form-control"
          type="text"
          placeholder="标题"
          v-model="memo.title"
        />
        <div class="dropdown select-category">
          <button
            class="btn btn-default dropdown-toggle"
            data-toggle="dropdown"
          >
            <span class="category">{{
              $store.state.aHelper.getCategory(memo.categoryId)
            }}</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li>
              <a @click="memo.categoryId = 0">学习</a>
            </li>
            <li>
              <a @click="memo.categoryId = 1">生活</a>
            </li>
            <li>
              <a @click="memo.categoryId = 2">工作</a>
            </li>
          </ul>
        </div>
        <ul class="tools">
          <li class="save" @click="saveMemo"></li>
          <li class="cancel" @click="cancleEdit"></li>
        </ul>
      </div>
      <textarea
        v-model="memo.content"
        class="text-content form-control"
        placeholder="内容"
      ></textarea>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ItemData from "../model/ItemData";

@Component
export default class MemoEditor extends Vue {
  memo: ItemData = new ItemData(-1, 0);

  created() {
    // console.log("组件创建");
    this.memo = this.$store.state.transMemo;
  }
  // 保存编辑
  saveMemo() {
    //   校验内容是否符合要求
    if (
      this.memo &&
      this.memo.categoryId > -1 &&
      this.memo.title.trim().length > 0 &&
      this.memo.content.trim().length > 0
    ) {
      // 新增和编辑可以根据 ItemData 里的id值判断 -1表示新增，否则为编辑
      if (this.memo.id > -1) {
        this.$store.state.aHelper.edit(this.memo);
      } else {
        this.$store.state.aHelper.add(this.memo);
      }

      this.$store.state.isShowEditModel = false;
    } else {
      window.alert("填写内容不符合格式");
    }
  }
  // 取消编辑
  cancleEdit() {
    this.$store.state.isShowEditModel = false;
  }
}
</script>

<style scoped></style>
